<template>
    <div>
        <div id="div1"></div>
        <el-button @click="getRichTextHtml">test</el-button>
    </div>
</template>

<script>
    import E from "wangeditor"
    import {mapState} from "vuex";
    export default {
        name: "richText",
        data(){
            return{
                editor:null,
            }
        },
        created() {
        },
        mounted(){
            this.createRichText();
        },
        computed: {
            ...mapState({
                loginServiceApi: state => state.loginServiceApi,
                fileUpload: state => state.fileUpload,
                user: state => state.user,
                headerSetting: state => state.headerSetting
            })
        },
        methods:{
            //创建富文本
            createRichText(){
                this.editor = new E('#div1')
                this.RichTextFileUpload(this.editor)
                this.editor.create()
            },
            getRichTextHtml(){
                let html = this.editor.txt.html()
                console.log(html)
            },
            //图片上传
            RichTextFileUpload(){
                let editor = this.editor;
                editor.config.uploadImgHeaders = {
                    Authorization: window.sessionStorage.getItem("tokenStr")
                }
                editor.config.uploadFileName = 'file';
                editor.config.uploadImgHooks = {
                    // 上传图片之前
                    // before: function(xhr) {
                    //     console.log(xhr)
                    //
                    //     // 可阻止图片上传
                    //     return {
                    //         prevent: true,
                    //         msg: '需要提示给用户的错误信息'
                    //     }
                    // },
                    // 图片上传并返回了结果，图片插入已成功
                    // success: function(xhr) {
                    //     console.log('success', xhr)
                    // },
                    // // 图片上传并返回了结果，但图片插入时出错了
                    // fail: function(xhr, editor, resData) {
                    //     console.log('fail', resData)
                    // },
                    // // 上传图片出错，一般为 http 请求的错误
                    error: function(xhr, editor, resData) {
                        console.log('error', xhr, resData)
                    },
                    // // 上传图片超时
                    // timeout: function(xhr) {
                    //     console.log('timeout')
                    // },
                    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                    customInsert: function(insertImgFn, result) {
                        // result 即服务端返回的接口
                        console.log('customInsert', result)

                        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                        insertImgFn(result.data)
                    }
                }
                editor.config.uploadImgServer = '/timeapi/'+this.loginServiceApi+'/upload/'
            }
        }
    }
</script>

<style scoped>

</style>